<template>
    <div class="websocket-demo">
        <el-page-header @back="goBack" content="WebSocket 功能演示" />

        <div class="demo-container">
            <!-- WebSocket状态面板 -->
            <WebSocketStatus />

            <!-- WebSocket消息测试器 -->
            <WebSocketTester />

            <!-- 使用说明 -->
            <el-card class="usage-card" shadow="hover">
                <div slot="header">
                    <span>使用说明</span>
                </div>

                <div class="usage-content">
                    <h4>1. 基本用法</h4>
                    <p>在组件中使用WebSocket功能：</p>
                    <pre><code>// 连接WebSocket
this.$initWebSocket('user123');

// 发送消息
this.$sendWebSocketMessage('text', { content: 'Hello' }, 'user123');

// 监听消息
this.$onWebSocket('message', (data) => {
  console.log('收到消息:', data);
});

// 断开连接
this.$closeWebSocket();</code></pre>

                    <h4>2. 事件监听</h4>
                    <p>可监听的事件类型：</p>
                    <ul>
                        <li><code>connected</code> - 连接成功</li>
                        <li><code>disconnected</code> - 连接断开</li>
                        <li><code>error</code> - 连接错误</li>
                        <li><code>reconnecting</code> - 正在重连</li>
                        <li><code>message</code> - 收到消息</li>
                        <li><code>statisticsUpdate</code> - 价格更新</li>
                        <li><code>locationUpdate</code> - 位置更新</li>
                    </ul>

                    <h4>3. 状态管理</h4>
                    <p>通过 <code>this.$websocketState</code> 访问WebSocket状态：</p>
                    <pre><code>// 检查连接状态
if (this.$websocketState.isConnected) {
  // 已连接
}

// 获取重连次数
const reconnectCount = this.$websocketState.reconnectCount;</code></pre>

                    <h4>4. 高级功能</h4>
                    <p>更多高级功能：</p>
                    <ul>
                        <li>自动重连机制</li>
                        <li>心跳检测</li>
                        <li>消息队列</li>
                        <li>事件系统</li>
                        <li>验签机制</li>
                    </ul>
                </div>
            </el-card>

            <!-- 代码示例 -->
            <el-card class="code-card" shadow="hover">
                <div slot="header">
                    <span>代码示例</span>
                </div>

                <el-tabs v-model="activeTab" type="border-card">
                    <el-tab-pane label="Vue组件" name="vue">
                        <pre><code>{{ vueExample }}</code></pre>
                    </el-tab-pane>

                    <el-tab-pane label="JavaScript" name="js">
                        <pre><code>{{ jsExample }}</code></pre>
                    </el-tab-pane>

                    <el-tab-pane label="API文档" name="api">
                        <div class="api-docs">
                            <h4>WebSocket API</h4>
                            <table class="api-table">
                                <thead>
                                    <tr>
                                        <th>方法名</th>
                                        <th>参数</th>
                                        <th>返回值</th>
                                        <th>说明</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>initWebSocket(uid)</td>
                                        <td>uid: 用户ID</td>
                                        <td>Promise</td>
                                        <td>初始化WebSocket连接</td>
                                    </tr>
                                    <tr>
                                        <td>sendMessage(type, message, uid)</td>
                                        <td>type: 消息类型, message: 消息内容, uid: 用户ID</td>
                                        <td>Promise</td>
                                        <td>发送消息</td>
                                    </tr>
                                    <tr>
                                        <td>closeWebSocket()</td>
                                        <td>-</td>
                                        <td>-</td>
                                        <td>关闭WebSocket连接</td>
                                    </tr>
                                    <tr>
                                        <td>addEventListener(event, callback)</td>
                                        <td>event: 事件名, callback: 回调函数</td>
                                        <td>-</td>
                                        <td>添加事件监听器</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
    </div>
</template>

<script>
import WebSocketStatus from '@/components/WebSocketStatus.vue';
import WebSocketTester from '@/components/WebSocketTester.vue';

export default {
    name: 'WebSocketDemo',
    components: {
        WebSocketStatus,
        WebSocketTester
    },
    data() {
        return {
            activeTab: 'vue',
            vueExample: `<template>
  <div>
    <div v-websocket-status></div>
    
    <el-button @click="connect">连接</el-button>
    <el-button @click="sendMessage">发送消息</el-button>
    <el-button @click="disconnect">断开</el-button>
    
    <div>状态: {{ $websocketState.isConnected ? '已连接' : '未连接' }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: 'user123'
    };
  },
  
  mounted() {
    // 监听WebSocket事件
    this.$onWebSocket('message', this.onMessage);
    this.$onWebSocket('connected', this.onConnected);
  },
  
  methods: {
    async connect() {
      try {
        await this.$initWebSocket(this.userId);
        this.$message.success('连接成功');
      } catch (error) {
        this.$message.error('连接失败');
      }
    },
    
    async sendMessage() {
      try {
        await this.$sendWebSocketMessage('text', { content: 'Hello' }, this.userId);
        this.$message.success('发送成功');
      } catch (error) {
        this.$message.error('发送失败');
      }
    },
    
    disconnect() {
      this.$closeWebSocket();
    },
    
    onMessage(data) {
      console.log('收到消息:', data);
    },
    
    onConnected(data) {
      console.log('连接成功:', data);
    }
  }
};
</script>`,

jsExample: `// 直接使用WebSocket服务
import * as WebSocketService from '@/services/websocket';

// 连接
WebSocketService.initWebSocket('user123').then(() => {
console.log('连接成功');
}).catch(error => {
console.error('连接失败:', error);
});

// 发送消息
WebSocketService.sendMessage('text', { content: 'Hello' }, 'user123');

// 监听事件
WebSocketService.addEventListener('message', (data) => {
console.log('收到消息:', data);
});

// 获取状态
const isConnected = WebSocketService.getConnectionStatus();
const stats = WebSocketService.getWebSocketStats();`
};
},

methods: {
goBack() {
this.$router.go(-1);
}
}
};
</script>

<style scoped>
.websocket-demo {
    padding: 20px;
}

.demo-container {
    max-width: 1200px;
    margin: 0 auto;
}

.usage-card,
.code-card {
    margin-top: 20px;
}

.usage-content h4 {
    margin: 20px 0 10px 0;
    color: #303133;
}

.usage-content p {
    margin: 10px 0;
    color: #606266;
}

.usage-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.usage-content li {
    margin: 5px 0;
    color: #606266;
}

.usage-content code {
    background-color: #f5f7fa;
    padding: 2px 4px;
    border-radius: 3px;
    color: #e6a23c;
}

.usage-content pre {
    background-color: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 10px 0;
}

.usage-content pre code {
    background-color: transparent;
    padding: 0;
    color: #606266;
}

.api-docs h4 {
    margin: 0 0 15px 0;
    color: #303133;
}

.api-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.api-table th,
.api-table td {
    border: 1px solid #ebeef5;
    padding: 12px;
    text-align: left;
}

.api-table th {
    background-color: #fafafa;
    color: #606266;
    font-weight: 500;
}

.api-table td {
    color: #606266;
}

.api-table code {
    background-color: #f5f7fa;
    padding: 2px 4px;
    border-radius: 3px;
    color: #e6a23c;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .websocket-demo {
        padding: 10px;
    }

    .api-table {
        font-size: 12px;
    }

    .api-table th,
    .api-table td {
        padding: 8px;
    }
}
</style>
